<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>5. Vue移动端 文章列表更多操作 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue首页 文章列表更多操作弹出层 (举报 不感兴趣):::">
<meta property="og:type" content="article">
<meta property="og:title" content="5. Vue移动端 文章列表更多操作">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/09/Vue_Mobile_Projects/6_moreHome/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue首页 文章列表更多操作弹出层 (举报 不感兴趣):::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-08T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.546Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">5. Vue移动端 文章列表更多操作</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-09</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~13.23K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178546"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue首页 文章列表更多操作弹出层 (举报 不感兴趣)<br><br>:::</p>
<span id="more"></span>

<h2 id="文章列表弹出层设置-举报删除功能-MoreAction-vue"><a href="#文章列表弹出层设置-举报删除功能-MoreAction-vue" class="headerlink" title="文章列表弹出层设置(举报删除功能) MoreAction.vue"></a>文章列表弹出层设置(举报删除功能) <code>MoreAction.vue</code></h2><p><a target="_blank" rel="noopener" href="https://youzan.github.io/vant/#/zh-CN/popup">Vant提供的popup 组件</a></p>
<blockquote>
<p>目标：Vant提供的弹窗层组件（封装独立的组件）<code>MoreAction.vue</code></p>
<p>使用: 在<code>main.vue</code> 导入使用</p>
<p>效果: 在首页上 弹出一个列表框</p>
<p>原理: 通过v-model 父传子 子传父 控制显示与隐藏</p>
<p>组件创建: 文件路径<code> src/components/MoreAction.vue</code> <code>components文件夹 里面 MoreAction.vue</code></p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/Ua7DWQG8bYNfMp9.png" alt="image-20210608205520862"></p>
<ol>
<li>给子组件设置两个 绑定事件 <code>:value </code> <code>@input</code> (使用v-model语法糖)</li>
</ol>
<ul>
<li><code>:value </code>接收父元素传入的 true值(父传子)</li>
<li><code>@input</code> 设置子元素给父元素传入的 false值(子传父)<ul>
<li>不能设置 v-model 因为 v-model修改的 <code>props</code>并不支持修改</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- van-popup是Vant提供的弹出层方法 --&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 1. ?接收首页点击后 创给的值 true 使用 van-popup方法 让其显示(true显示 false隐藏) --&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- 需要设置: 1. :value 动态绑定的固定布尔值(用于接收首页传入的true让弹出框显示)</span></span><br><span class="line"><span class="comment">                2. @input 设置input监听(Vant需求) 当子组件关闭时候 给首页传入false 让首页关闭弹出框  --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">van-popup</span> <span class="attr">:value</span>=<span class="string">&#x27;value&#x27;</span> @<span class="attr">input</span>=<span class="string">&#x27;handleClose&#x27;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li><p>给父组件 设置 v-model 接收 <code>isShow</code>绑定的动态布尔值 <code>&lt;MoreAction v-model=&#39;isShow&#39;&gt;&lt;/MoreAction&gt;</code></p>
</li>
<li><p>父组件声明方法在data()保存  点击后让 isShow变为 true 并且携带true值 子组件通过<code>props:[&#39;value&#39;]</code>接收父组件传入的true  <code>:value </code> 再获取其true值 实现显示 &#x3D;&#x3D;(父传子)&#x3D;&#x3D;</p>
</li>
<li><p>子组件需要隐藏时 需给父组件传入false  <code>@input</code> 传的false值通过<code> this.$emit(&#39;input&#39;, false)</code>方法 传给父组件  父组件设置一个方法(需要参数用来接收子组件的值) 接收子组件传来的数据 并且赋值子组件传的值 &#x3D;&#x3D;(子传父)&#x3D;&#x3D;</p>
</li>
<li><p>父组件 绑定的 v-model <code>&lt;MoreAction v-model=&#39;isShow&#39;&gt;&lt;/MoreAction&gt;</code> 接收到 子组件修改父组件完毕的数据 让其隐藏 (不需要操作 只是流程)</p>
</li>
</ol>
<blockquote>
<p>父组件 设置  <code>main文件夹里面 main.vue</code></p>
</blockquote>
<ul>
<li>点击事件 点击后让其显示(true) <code>template</code> 模板</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;close&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- ?设置点击显示弹窗事件 点击后设置为true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">van-icon</span> @<span class="attr">click</span>=<span class="string">&#x27;handleOpen&#x27;</span> <span class="attr">name</span>=<span class="string">&quot;cross&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">van-icon</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>v-model双向绑定 控制弹出层显示隐藏 <code>template</code> 模板</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- ?当isShow被点击按钮点击后变为 true显示组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">MoreAction</span> <span class="attr">v-model</span>=<span class="string">&#x27;isShow&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">MoreAction</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>设置 isShow 布尔值 默认fasle(不显示) <code>script</code> 脚本</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">  <span class="comment">// ? Vant中提供弹窗属性(默认不显示false 点击后再显示) 需要在 data中设置</span></span><br><span class="line">      <span class="attr">isShow</span>: <span class="literal">false</span>,</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>设置 点击让其显示的方法 <code>script</code> 脚本</li>
<li>设置 子组件向父组件传值的方法(接收子组件传来的值)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">    <span class="comment">// ? 控制更多操作组件显示(显示组件)</span></span><br><span class="line">   handleOpen () &#123;</span><br><span class="line">     <span class="comment">// ? 点击后 显示组件(false 变为 true) 传给子组件</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">isShow</span> = <span class="literal">true</span></span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="comment">// ? 接收子组件传来的数值 参数为子组件的布尔值</span></span><br><span class="line">   handleClose (flag) &#123;</span><br><span class="line">     <span class="comment">// ? 把传来的布尔类型 给 isShow接收 实现隐藏</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">isShow</span> = flag</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>导入子组件的组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入弹窗的组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">MoreAction</span> <span class="keyword">from</span> <span class="string">&#x27;../../components/MoreAction&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>子组件 设置  <code>components文件夹 里面 MoreAction.vue</code></p>
</blockquote>
<ul>
<li><p>给子组件设置两个 绑定事件 <code>:value </code> <code>@input</code> (使用v-model语法糖)</p>
</li>
<li><p>通过 <code>props:[]</code> 接收父组件传入的布尔值  <code>:value </code> 接收布尔值  实现显示效果 (父传子)</p>
</li>
<li><p>需要隐藏的时候  <code>@input</code> 传的false值通过<code> this.$emit(&#39;input&#39;, false)</code>方法 传给父组件 (子传父)</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 1. ?接收首页点击后 创给的值 true 使用 van-popup方法 让其显示(true显示 false隐藏) --&gt;</span><br><span class="line">  &lt;!-- 需要设置 :value 动态绑定的固定布尔值(用于接收首页传入的true让弹出框显示)</span><br><span class="line">                @input 设置input监听(Vant需求) 当子组件关闭时候 给首页传入false 让首页关闭弹出框  --&gt;</span><br><span class="line">  &lt;van-popup :value=&#x27;value&#x27; @input=&#x27;handleClose&#x27;&gt;</span><br><span class="line">    &lt;van-cell-group v-if=&quot;!isReport&quot;&gt;</span><br><span class="line">      &lt;van-cell&gt;不感兴趣&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell is-link @click=&quot;isReport=true&quot;&gt;反馈垃圾内容&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;拉黑作者&lt;/van-cell&gt;</span><br><span class="line">    &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;van-cell-group v-else&gt;</span><br><span class="line">      &lt;van-cell icon=&quot;arrow-left&quot; @click=&quot;isReport=false&quot;&gt;返回&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;侵权&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;色情&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;暴力&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;低俗&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;不适&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;错误&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell&gt;其他&lt;/van-cell&gt;</span><br><span class="line">    &lt;/van-cell-group&gt;</span><br><span class="line">  &lt;/van-popup&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;xianshitanchuang&#x27;,</span><br><span class="line">  // props:[&#x27;value&#x27;],</span><br><span class="line">  // 接收页面传回的 显示隐藏数值 (父组件传回的)</span><br><span class="line">  props: &#123;</span><br><span class="line">    // 给传回来的值 强制设置为布尔类型(按需) 如果类型不对 会报错</span><br><span class="line">    value: &#123;</span><br><span class="line">        // 设置父组件传入的类型</span><br><span class="line">      typeof: Boolean,</span><br><span class="line">        // 设置必填项</span><br><span class="line">      required: true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data () &#123;</span><br><span class="line">    // 控制举报窗口</span><br><span class="line">    return &#123;</span><br><span class="line">      isReport: false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleClose () &#123;</span><br><span class="line">      // 控制关闭弹窗（只能让父组件去关闭）</span><br><span class="line">      // this.$emit(&#x27;event-close&#x27;, false)</span><br><span class="line">      this.$emit(&#x27;input&#x27;, false)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped lang=&#x27;less&#x27;&gt;</span><br><span class="line">.van-popup &#123;</span><br><span class="line">  width: 80%;</span><br><span class="line">  border-radius: 4px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<hr>
<p>父传子 子传父<code> v-model</code> <code>$event</code></p>
<ul>
<li>指令v-model在组件标签上使用<ul>
<li><img src="https://i.loli.net/2021/06/11/Bh2tHNwiOmKUP1W.png"></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;more-action v-model=&#x27;isShow&#x27;&gt;&lt;/more-action&gt;</span><br><span class="line">//$event 可以动态获取子组件传来的数据</span><br><span class="line">&lt;more-action :value=&#x27;isShow&#x27; @input=&#x27;isShow=$event&#x27;&gt;&lt;/more-action&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>指令v-model在DOM标签上使用</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&#x27;uname&#x27;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">:value</span>=<span class="string">&#x27;uname&#x27;</span> @<span class="attr">input</span>=<span class="string">&#x27;uname=$event.target.value&#x27;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>$event 在自定义事件中指的是传递的数据  <code>@input=&#39;isShow=$event&#39;</code></li>
<li>$event 在原生DOM事件中指的是事件对象  <code>@input=&#39;uname=$event.target.value&#39;</code></li>
</ol>
</blockquote>
<h2 id="Vant的van-popup组件原理分析-扩展"><a href="#Vant的van-popup组件原理分析-扩展" class="headerlink" title="Vant的van-popup组件原理分析(扩展)"></a>Vant的van-popup组件原理分析(扩展)</h2><blockquote>
<p>目标：理解组件上v-model的底层实现原理</p>
</blockquote>
<ul>
<li>组件代码</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div @click=&#x27;handleClose&#x27; class=&quot;byte-popup&quot; :style=&#x27;&#123;display: value?&quot;block&quot;:&quot;none&quot;&#125;&#x27;&gt;</span><br><span class="line">    &lt;div @click.stop class=&quot;byte-box&quot;&gt;测试&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;BytePopup&#x27;,</span><br><span class="line">  props: [&#x27;value&#x27;],</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleClose () &#123;</span><br><span class="line">      // 控制点击背景关闭弹窗</span><br><span class="line">      console.log(&#x27;hello&#x27;)</span><br><span class="line">      this.$emit(&#x27;input&#x27;, false)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped lang=&#x27;less&#x27;&gt;</span><br><span class="line">.byte-popup &#123;</span><br><span class="line">  position: fixed;</span><br><span class="line">  top: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">  width: 100%;</span><br><span class="line">  height: 100%;</span><br><span class="line">  background: rgba(0, 0, 0, 0.8);</span><br><span class="line">  z-index: 9999;</span><br><span class="line">  .byte-box &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: 50%;</span><br><span class="line">    left: 50%;</span><br><span class="line">    transform: translate(-50%, -50%);</span><br><span class="line">    background: #fff;</span><br><span class="line">    width: 200px;</span><br><span class="line">    height: 200px;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>组件的用法</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &lt;byte-popup v-model=&#x27;show&#x27;&gt;内容&lt;/byte-popup&gt; --&gt;</span><br><span class="line">&lt;byte-popup :value=&#x27;show&#x27; @input=&#x27;show=$event&#x27;&gt;内容&lt;/byte-popup&gt;</span><br><span class="line">&lt;!-- &lt;van-popup v-model=&quot;show&quot;&gt;内容&lt;/van-popup&gt; --&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：v-model在组件上的用法原理：通过value属性向组件传值，通过input事件监听子组件传回的值。</p>
</blockquote>
<h2 id="组件属性传值的类型检测-Prop验证-扩展"><a href="#组件属性传值的类型检测-Prop验证-扩展" class="headerlink" title="组件属性传值的类型检测 Prop验证(扩展)"></a>组件属性传值的类型检测 Prop验证(扩展)</h2><p><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81">Prop 验证详情</a></p>
<blockquote>
<p>目标：熟悉组件属性类型检测的作用和用法</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// props: [&#x27;value&#x27;],</span></span><br><span class="line"><span class="attr">props</span>: &#123;</span><br><span class="line">  <span class="comment">// 属性的类型检测:提高组件被使用时传递数据的规范性</span></span><br><span class="line">  <span class="comment">// https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81</span></span><br><span class="line">  <span class="attr">value</span>: &#123;</span><br><span class="line">    <span class="comment">// 属性值必须是布尔类型</span></span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">Boolean</span>,</span><br><span class="line">    <span class="comment">// 属性是必填项</span></span><br><span class="line">    <span class="attr">required</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>类型检测可以提供组件的使用的规范性</li>
<li>熟悉类型检测的具体<a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81">规则</a></li>
</ol>
</blockquote>
<h2 id="不感兴趣文章功能实现-MoreAction-vue"><a href="#不感兴趣文章功能实现-MoreAction-vue" class="headerlink" title="不感兴趣文章功能实现 MoreAction.vue"></a>不感兴趣文章功能实现 <code>MoreAction.vue</code></h2><p><a target="_blank" rel="noopener" href="https://youzan.github.io/vant/#/zh-CN/popup">Vant提供的popup 组件</a></p>
<blockquote>
<p>目标：实现不感兴趣功能 基于文章列表弹出层 实现不感兴趣功能实现(轻提示)</p>
<p>效果: 通过弹出层提供的不感兴趣文章按钮 隐藏改文章 并且把文章id传给服务器 下次不显示</p>
<p>原理: v-model 父传子图书id 子组件提交不感兴趣后 传给父组件图书id 让父组件在文章列表中删除</p>
</blockquote>
<h3 id="不感兴趣功能-父组件传值给子组件文章id"><a href="#不感兴趣功能-父组件传值给子组件文章id" class="headerlink" title="不感兴趣功能 父组件传值给子组件文章id"></a>不感兴趣功能 父组件传值给子组件文章id</h3><ul>
<li>父组件 点击按钮时传入文章id <code>首页 main.vue中获取 template模板中</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> &lt;span class=&quot;close&quot;&gt;</span><br><span class="line">&lt;!-- ?设置点击显示弹窗事件 点击后设置为true 并且携带文章对应的id值 --&gt;</span><br><span class="line">	&lt;van-icon @click=&#x27;handleOpen(item.art_id)&#x27; name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>文章id注入子组件<code>首页 main.vue中获取 template模板中</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?编辑频道组件 给组件传入 频道列表 和 当前选中频道列表 的数据 --&gt;</span><br><span class="line">&lt;ChannelEdit v-model=&#x27;isEdit&#x27; :channels=&#x27;channels&#x27; :activeindex=&#x27;active&#x27;&gt;&lt;/ChannelEdit&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件 声明一个获取 用户id的对象 <code>首页 main.vue中获取 data()储存数据</code><ul>
<li>默认没有数据设置 -1</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个点击后 获取文章id的对象</span></span><br><span class="line"><span class="attr">articleId</span>: -<span class="number">1</span>,</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件 获取文章id方法 <code>首页 main.vue中获取 scrip脚本 methods: 中设置方法</code> <ul>
<li>把不喜欢内容的id值 创给子组件 让子组件上传到服务器中</li>
</ul>
</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+// 声明 控制弹窗显示 和 记录文章的id</span></span><br><span class="line">handleOpen (id) &#123;</span><br><span class="line">    // 控制弹窗显示</span><br><span class="line">    this.isShow = true</span><br><span class="line"><span class="addition">+    // 记录文章的id</span></span><br><span class="line"><span class="addition">+    this.articleId = id</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：点击X，获取文章id并记录，通过组件属性传入子组件。</p>
</blockquote>
<h3 id="不感兴趣功能接口设置"><a href="#不感兴趣功能接口设置" class="headerlink" title="不感兴趣功能接口设置"></a>不感兴趣功能接口设置</h3><blockquote>
<p>目标：封装不喜欢接口调用方法</p>
</blockquote>
<ul>
<li>封装接口调用方法 <code>api文件夹 里 article.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 不感兴趣功能 的接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">dislike</span> = id =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">requset</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/dislikes&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: id</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="不感兴趣功能实现-子组件设置上传图书id"><a href="#不感兴趣功能实现-子组件设置上传图书id" class="headerlink" title="不感兴趣功能实现 子组件设置上传图书id"></a>不感兴趣功能实现 子组件设置上传图书id</h3><ul>
<li>点击按钮发送请求 <code>components文件夹 里面 MoreAction.vue</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ! 绑定不敢兴趣点击方法 --&gt;</span><br><span class="line">  &lt;van-cell @click=&quot;disLike&quot;&gt;不感兴趣&lt;/van-cell&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>导入不感兴趣的api接口组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 导入不感兴趣api</span></span><br><span class="line"><span class="comment">// ? 导入举报按钮的 api</span></span><br><span class="line"><span class="keyword">import</span> &#123; dislike &#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/api-article.js&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>实现不感兴趣子组件设置 <code>script 脚本  methods: 中设置方法</code><ul>
<li>子组件上传父组件传回的不喜欢文章id 提交上传 </li>
<li>发送数据成功后 子组件给父组件 传回关闭弹出层的布尔值 实现提交数据后 关闭弹出层 <code>$emit</code>子传父</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 不敢兴趣按钮的接口比对 传给服务器不敢兴趣的文章id</span></span><br><span class="line"><span class="keyword">async</span> disLike () &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">//! 传给服务器 获取服务器的返回值 如果成功 提示用户操作成功(try) 不成功提示用户(catch)</span></span><br><span class="line">    <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">dislike</span>(<span class="variable language_">this</span>.<span class="property">articleId</span>)</span><br><span class="line">    <span class="keyword">if</span> (ret.<span class="property">data</span>.<span class="property">target</span>) &#123;</span><br><span class="line">      <span class="comment">//! 关闭弹窗</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;input&#x27;</span>, <span class="literal">false</span>)</span><br><span class="line">      <span class="comment">//! 删除对应的文章数据（通知父组件去删除文章数据）</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;on-success&#x27;</span>, <span class="variable language_">this</span>.<span class="property">articleId</span>)</span><br><span class="line">      <span class="comment">//! 提示用户操作成 ($toast)是vant提供的轻提示</span></span><br><span class="line">      <span class="variable language_">this</span>.$toast(<span class="string">&#x27;不感兴趣操作成功&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="comment">//! 不成功提示用户 ($toast)是vant提供的轻提示</span></span><br><span class="line">    <span class="variable language_">this</span>.$toast(<span class="string">&#x27;不感兴趣操作失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="父组件在文章列表里删除该文章"><a href="#父组件在文章列表里删除该文章" class="headerlink" title="父组件在文章列表里删除该文章"></a>父组件在文章列表里删除该文章</h3><ul>
<li>父组件接收子组件传回不感兴趣图书的id值 <code>子传父</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?当isShow被点击按钮点击后变为 true显示组件</span><br><span class="line">      @on-success=&#x27;handleDislike&#x27; 接收子组件传回的图书id值--&gt;</span><br><span class="line">&lt;MoreAction v-model=&#x27;isShow&#x27; :article-id=&#x27;articleId&#x27; @on-success=&#x27;handleDislike&#x27;&gt;&lt;/MoreAction&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件接收到子组件传给不感兴趣图书id 在文章列表中删除该内容 <code>script 脚本  methods: 中设置方法</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不敢兴趣的删除功能方法</span></span><br><span class="line">handleDislike (id) &#123; <span class="comment">// 接收子组件传回要删除的id值</span></span><br><span class="line">  <span class="comment">// 根据id删除该文章</span></span><br><span class="line">  <span class="keyword">const</span> index = <span class="variable language_">this</span>.<span class="property">activeChannel</span>.<span class="property">articles</span>.<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item.<span class="property">art_id</span> === id</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 根据索引删除数组的一个元素</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">activeChannel</span>.<span class="property">articles</span>.<span class="title function_">splice</span>(index, <span class="number">1</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>调用接口告诉服务器我对那篇文章不感兴趣</li>
<li>操作成功后，通知父组件删除对应文章</li>
</ol>
<h2 id="文章id超范围问题"><a href="#文章id超范围问题" class="headerlink" title="文章id超范围问题"></a>文章id超范围问题</h2><p><a target="_blank" rel="noopener" href="https://github.com/sidorares/json-bigint">处理id超范围的包</a></p>
<blockquote>
<p>问题: js处理数字有长度限制 如果后端传来的数据太长 js无法处理 导致无法把修改后的数据交给后端处理</p>
<p>解决: 安装插件 npm i json-bigint</p>
<p>类型: 会把 超范围的id 转换为对象拼接起来 并非之前字符串 所以调用时候 需要用 <code>toString()</code>转换成字符串</p>
</blockquote>
<p><img src="https://i.loli.net/2021/06/10/YKC2j6HSOGcQNZX.png" alt="image-20210610132529317"></p>
<blockquote>
<p>在通用的接口调用模块设置  <code>utils文件夹 里面 request.js</code></p>
</blockquote>
<ul>
<li>设置<code>transformResponse</code> 在传递给 then&#x2F;catch 前，允许修改响应数据(比响应式拦截更早)</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">// 导入bigint插件</span><br><span class="line">import JSONbig from &#x27;json-bigint&#x27;</span><br><span class="line">// ~  声明一个通用的url基础地址 用于申请token的基础路径 用常量保存</span><br><span class="line">const baseURL = &#x27;http://api-toutiao-web.itheima.net/app/&#x27;</span><br><span class="line">// ~  axios分支的方法 创建axios接口调用方法 取代单一的axios方法(方便单独设置)</span><br><span class="line">const instance = axios.create(&#123;</span><br><span class="line"><span class="addition">+   // 在接口获取数据之前对后端返回的原始数据进行处理</span></span><br><span class="line"><span class="addition">+   // 这里处理发生在响应拦截器之前（它最先接触到后端返回的原始数据）</span></span><br><span class="line"><span class="addition">+   transformResponse: [(data) =&gt; &#123;</span></span><br><span class="line"><span class="addition">+     // 这里对数据处理好之后，再交给响应拦截器即可</span></span><br><span class="line"><span class="addition">+     try &#123;</span></span><br><span class="line"><span class="addition">+       // 转换的id值 是一个对象 注意后续: 需要转换为字符串格式 对象不属于任何字符串格式</span></span><br><span class="line"><span class="addition">+       return JSONbig.parse(data) // parse是对文章列表的id值 进行转换 解决js数值最大限制问题</span></span><br><span class="line"><span class="addition">+     &#125; catch &#123;</span></span><br><span class="line"><span class="addition">+       // 如果数据转换错误，就不做转换，返回原始数据</span></span><br><span class="line"><span class="addition">+       return data</span></span><br><span class="line"><span class="addition">+     &#125;</span></span><br><span class="line"><span class="addition">+ &#125;],</span></span><br><span class="line">  // ~ baseURL是axios属性 用来声明url基础路径</span><br><span class="line">  baseURL: baseURL</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果用完有Vue警告 :</p>
<p><img src="https://i.loli.net/2021/06/10/ZGrsb2gnAhqJOk9.png" alt="1623308642(1)"></p>
<p>原因: 插件会自动把长id转换为 对象 拼接起来 但是<code>:key</code> 要求的是对象 所以会警告</p>
<p>解决: 需要用 <code>toString()</code>转换成字符串 即可</p>
<ul>
<li><code>:key=&quot;item.art_id.toString()&quot;</code></li>
</ul>
</blockquote>
<h2 id="举报功能的实现-MoreAction-vue"><a href="#举报功能的实现-MoreAction-vue" class="headerlink" title="举报功能的实现 MoreAction.vue"></a>举报功能的实现 <code>MoreAction.vue</code></h2><p><a target="_blank" rel="noopener" href="https://youzan.github.io/vant/#/zh-CN/popup">Vant提供的popup 组件</a></p>
<blockquote>
<p>目标：实现各种类型举报功能</p>
<p>效果: 根据举报id 上传给服务器 举报类型 举报完毕后审核通过(和后端互动) 屏蔽该内容</p>
<p>原理: v-model 父传子图书id 子组件提交举报后 传给父组件图书id 让父组件在文章列表中删除</p>
<p><big>注意:</big> 后端返回的图书id可能过大 需要设置 id超范围解决插件: <a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/axios/axios_transform.html#%E6%96%87%E7%AB%A0id%E8%B6%85%E8%8C%83%E5%9B%B4%E9%97%AE%E9%A2%98">解决id超范围方法</a></p>
</blockquote>
<h3 id="举报文章列表基本布局"><a href="#举报文章列表基本布局" class="headerlink" title="举报文章列表基本布局"></a>举报文章列表基本布局</h3><blockquote>
<p>常量数据 一般单独设置为一个组件 方便修改数据 <code>utils文件夹 里面 新建 constant.js</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 常量 储存器</span></span><br><span class="line"><span class="comment">// 举报类型</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> reports = [</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">0</span>, <span class="attr">label</span>: <span class="string">&#x27;其他问题&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">1</span>, <span class="attr">label</span>: <span class="string">&#x27;标题夸张&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">2</span>, <span class="attr">label</span>: <span class="string">&#x27;低俗色情&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">3</span>, <span class="attr">label</span>: <span class="string">&#x27;错别字多&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">4</span>, <span class="attr">label</span>: <span class="string">&#x27;旧闻重复&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">5</span>, <span class="attr">label</span>: <span class="string">&#x27;广告软文&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">6</span>, <span class="attr">label</span>: <span class="string">&#x27;内容不实&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">7</span>, <span class="attr">label</span>: <span class="string">&#x27;涉嫌违法犯罪&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">value</span>: <span class="number">8</span>, <span class="attr">label</span>: <span class="string">&#x27;侵权&#x27;</span> &#125;</span><br><span class="line">]</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>导入到弹出层组件中 填充举报功能 <code>MoreAction.vue</code></p>
</blockquote>
<ul>
<li>导入常量组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入举报功能的常量(固定值 单独设置在固定值文件 便于修改)</span></span><br><span class="line"><span class="keyword">import</span> &#123; reports &#125; <span class="keyword">from</span> <span class="string">&#x27;../utils/constant&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>把导入常量的数据储存起来 <code>script脚本 data() 存储数据</code></li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      isReport: false,</span><br><span class="line"><span class="addition">+     reports: reports</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>把举报常量值<code> v-for</code> 循环遍历打印到页面上 <code>template模板设置</code><ul>
<li>设置<code>@click</code>点击事件 点击后 携带其举报信息的id值 把举报信息上传到服务器</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ？举报功能保存data()常量 循环遍历到模板上</span><br><span class="line">设置点击方法 绑定举报类型(id值) --&gt;</span><br><span class="line">    &lt;van-cell @click=&quot;handleReport(item.value)&quot; icon=&quot;info-o&quot; v-for=&quot;item in reports&quot; :key=&quot;item.value&quot;&gt;&#123;&#123;item.label&#125;&#125;&lt;/van-cell&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>固定的相对不变的数据可以统一放到独立的模块中，方便了后续的统一维护</li>
</ol>
<h3 id="举报文章功能实现"><a href="#举报文章功能实现" class="headerlink" title="举报文章功能实现"></a>举报文章功能实现</h3><blockquote>
<p>封装 举报文章的api接口 <code>api文件夹 里 article.js</code></p>
</blockquote>
<ul>
<li>封装举报文章接口调用方法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 举报功能的接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">report</span> = (<span class="params">articleId, type</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">requset</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/reports&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: articleId,</span><br><span class="line">      <span class="attr">type</span>: type</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>组件设置点击事件 上传举报内容分类 <code>子传父</code></p>
</blockquote>
<ul>
<li>绑定点击事件，发请求(其实上一步已经做了) <code>template模板设置</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">  &lt;!-- ？举报功能保存data()常量 循环遍历到模板上</span><br><span class="line">		设置点击方法 绑定举报类型(id值) --&gt;</span><br><span class="line">&lt;van-cell @click=&quot;handleReport(item.value)&quot; icon=&quot;info-o&quot; v-for=&quot;item in reports&quot; :key=&quot;item.value&quot;&gt;&#123;&#123;item.label&#125;&#125;&lt;/van-cell&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>设置举报信息发送 <ul>
<li>发送数据成功后 子组件给父组件 传回关闭弹出层的布尔值 实现提交数据后 关闭弹出层 <code>$emit</code>子传父</li>
<li>举报完毕后 通知父组件 删除该文章 <code>$emit</code>子传父</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 举报功能接口比对 传给服务器举报信息</span></span><br><span class="line"><span class="keyword">async</span> handleReport (type) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">report</span>(<span class="variable language_">this</span>.<span class="property">articleId</span>, type)</span><br><span class="line">    <span class="keyword">if</span> (ret.<span class="property">data</span>.<span class="property">target</span>) &#123;</span><br><span class="line">      <span class="comment">// ? 举报成功提示用户($toast)是vant提供的轻提示</span></span><br><span class="line">      <span class="variable language_">this</span>.$toast(<span class="string">&#x27;举报文章成功&#x27;</span>)</span><br><span class="line">      <span class="comment">// ? 关闭弹窗</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;input&#x27;</span>, <span class="literal">false</span>)</span><br><span class="line">      <span class="comment">// ? 通知父组件删除文章</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;on-success&#x27;</span>, <span class="variable language_">this</span>.<span class="property">articleId</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">catch</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.$toast(<span class="string">&#x27;举报文章失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/09/Vue_Mobile_Projects/6_moreHome/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/09/Vue_Mobile_Projects/6_moreHome/";
            const title         = "「5. Vue移动端 文章列表更多操作」";
            const excerpt       = `::: tip 介绍
Vue首页 文章列表更多操作弹出层 (举报 不感兴趣):::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 4. Vue移动端 频道关联文章列表" href="/2021/06/08/Vue_Mobile_Projects/5_Home/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 6. Vue移动端 频道列表编辑操作" href="/2021/06/10/Vue_Mobile_Projects/7_Channel/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>